// 这个变量是每页显示的条数
let amount = parseInt($("#amount").val());
// 这是点击的页码，默认就是1
let dianji = 1;

    // 这是每页显示条数的更改后的方法
    $("#amount").change(()=>{
        amount = parseInt($("#amount").val());
        // 执行渲染表格的函数
        Render({
            page:dianji,
            num:amount,
            data:mydata
        });
        // 执行渲染页码的函数
        Page({
            page:dianji,
            num:amount,
            data:mydata
        });
        mydian();

    })
   
   // 渲染表格的方法
    function Render(arr){
        let data = arr.data;
        let num = arr.num;
        let page = arr.page;
        let shu =(page-1)*num;
        data = data.slice(shu,shu+num);
        $("#mytbody").html("");
        for (let i = 0; i < data.length; i++) {
            $("#mytbody").append(`
                <tr>
                    <td>${data[i].销售单号}</td>
                    <td>${data[i].p_id}</td>
                    <td>${data[i].数量}</td>
                    <td>${data[i].销售价}</td>
                    <td>${data[i].用户名称}</td>
                    <td>${data[i].用户手机号}</td>
                    <td>
                        <a href=""  data-toggle="modal" data-target="#exampleModal" id="chakan">查看</a>
                    </td>
                </tr>
            `);
        }
        page2();
        chakan();
    }

    // 渲染页码的方法
    function Page(arr){
        let data = arr.data;
        let num = arr.num;
        let page = arr.page;
        // 渲染页码
        $("#page").html("");
        $("#page").append(`  
            <div>
                <p class="iconfont">&#xe630</p>
            </div>
        `)

        for (let i = 1; i <= Math.ceil(data.length/num); i++) {
            $("#page").append(`
                <div>${i}</div>
            `);
        }

        $("#page").append(`  
            <div>
                <p class="iconfont">&#xe631</p>
            </div>
        `)

        // 选中的页码添加类名
        for (let i = 1; i <= $("#page>div").length; i++) {
            if(i==page){
                $("#page>div")[i].classList.add("dang");
            }
        }

        page2();
        chakan();
    }

    // 翻页的
    function page2(){
        $("#page>div").on("click",function(){
            // 定义一个变量，值是导航的长度-1
            let k = $("#page>div").length-1;
            console.log("1");
            // 循环节点集合
            for (let i = 0; i < $("#page>div").length; i++) {
                // 如果获取出来的值是正常数字，那就说明不是上下页，否则就是上下页
                if (i==this.innerText) {
                    // 将当前页赋值给dianji,后面传入当前页码渲染表格
                    dianji = parseInt(this.innerText);
                }else{
                    // 如果是上页并且变量大于1，那就将当前减一，然后跳出循环
                    if (this==$("#page>div")[0] && dianji>1) {
                        dianji--;
                        break;
                        // 如果是最后一个框，并且页码不是最后一个框，那就将当前+1，跳出循环
                    }else if (this==$("#page>div")[k] && dianji<k-1) {
                        dianji++;
                        break;
                    }
                }
            }
            // 执行渲染表格的函数
            Render({
                page:dianji,
                num:amount,
                data:mydata
            });
            // 执行渲染页码的函数
            Page({
                page:dianji,
                num:amount,
                data:mydata
            });
        })
    }

    // 输入多少页，进入多少页。
    $("#jump").change(()=>{
        if (parseInt($("#jump").val())<=$("#page>div").length-2 && parseInt($("#jump").val())>0) {
            dianji = parseInt($("#jump").val())
            // 执行渲染表格的函数
            Render({
                page:dianji,
                num:amount,
                data:mydata
            });
            // 执行渲染页码的函数
            Page({
                page:dianji,
                num:amount,
                data:mydata
            });  
        }
    })

    // 点击重置按钮，重置列表
    $("#chongzhi").on("click",()=>{
        // 执行渲染表格的函数
        Render({
            page:dianji,
            num:amount,
            data:mydata
        });
        // 执行渲染页码的函数
        Page({
            page:dianji,
            num:amount,
            data:mydata
        });   
    })


    // 模态框

    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // 按钮，该按钮触发模式
        var recipient = button.data('whatever') // 从数据中提取data-*属性
        // 如有必要，您可以在这里启动AJAX请求（然后在回调中进行更新）。
        // 更新模态的内容。这里我们将使用jQuery，但您可以使用数据绑定库或其他方法。
        var modal = $(this)
        modal.find('.modal-title').text('查看退换记录')
        modal.find('.modal-body input').val(recipient)
      })


    //   查看的ajax
    // let arr1 = new Array(12);

    function chakan (){
        $("#chakan").on("click",function(){
            console.log("hhhhh");
            let fu = this.parentElement.parentElement;
            console.log(fu);
            let zi = $(fu).children().eq(0).text()
            console.log(zi);

            $.ajax({
                url:'/online_retreat_see',
                data:{
                    p_id:zi
                },
                method:'post',
                success:(res)=>{
                    console.log(res);
                    let ii = res[0];
                    document.getElementById("s1").innerHTML = "";

                    for(var k in ii){
                        
                        // console.log('属性名',k) //属性名
                        // console.log('属性值',ii[k]) //属性值
                        document.getElementById("s1").innerHTML += k + "——" + ii[k];
                        $("#s1").append(`<br>`);
                    }
                }
            })
        })
    }


    $("#queding").css({
    "width": "92%",
    "height": "36px",
    "width": "60px",
    "font-size": "14px",
    "border": "none",
    "background-color": "#4DC3B6",
    "color": "white",
    "border-radius": "4px",
    "outline":"none"
    })


